<template>
  <div class="rightCenter">
    <div class="title">近视人群划分</div>
    <div class="pieChart" id="pieChart" ref="pieChart"></div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  name: "rightCenter",
  data() {
    return {
      chart: null
    };
  },
  mounted() {
    this.init()
  },
  methods: {
    init: function() {
      this.chart = echarts.init(this.$refs["pieChart"]);
      const option = {
        series: [
          {
            type: "pie",
            radius: ["40%", "70%"],
            data: [
              { value: 1048, name: "非近视人群", itemStyle: { color: "#f96262" } },
              { value: 735, name: "观察期人群", itemStyle: { color: "#f99958" } },
              { value: 580, name: "低度近视人群", itemStyle: { color: "#63fcd7" } },
              { value: 484, name: "中度近视人群", itemStyle: { color: "#0e6de9" } },
              { value: 300, name: "高度近视人群", itemStyle: { color: "#ac4ed3" } }
            ],
            label: {
              formatter(params) {
                return params.name + "：" + params.value
              },
              color: '#8dc4f5'
            },
          }
        ]
      }
      this.chart.setOption(option);
    }
  }
};
</script>
<style scoped>
.rightCenter {
  width: 540px;
  height: 300px;
  background: url("../assets/right_mid.png") no-repeat;
  background-size: 100% 100%;
}
.title {
  height: 45px;
  color: #58aff8;
  font-size: 14px;
  font-weight: 600;
  line-height: 45px;
  text-align: right;
  padding-right: 20px;
}
.pieChart {
  width: 100%;
  height: 260px;
}
</style>